<script setup>
import { reactive, getCurrentInstance } from 'vue'
import { useAllDataStore } from '@/stores'
import { useRouter } from 'vue-router'
import api from '@/api'; // 统一导入 API
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const loginForm = reactive({
    phone: '',
    password: ''
})
const store = useAllDataStore()
const router = useRouter()

// 通用的菜单列表
const commonMenuList = [
    {
        path: '/home',
        name: 'home',
        label: '首页',
        icon: 'house',
        url: 'Home' // 已存在
    },
    {
        path: '/storeCashier',
        name: 'storeCashier',
        label: '收银台',
        icon: 'ShoppingTrolley',
        url: 'StoreCashier' // 新增
    },
    {
        path: '/Settlement',
        name: 'Settlement',
        label: '订单管理',
        icon: 'Wallet',
        url: 'Settlement' // 新增
    },
    {
        path: 'blue', // 注意：通常路径不应该是一个颜色名，这里可能是一个错误或者特殊用途，需要确认
        label: '库存管理',
        icon: 'goods',
        url: 'Inventory', // 新增一个总的URL用于库存管理父级（可选）
        children: [
            {
                path: '/inventory',
                name: 'inventory',
                label: '库存详情',
                icon: 'Folder',
                url: 'Inventory' // 新增
            },
            {
                path: '/InventoryTransaction',
                name: 'InventoryTransaction',
                label: '出入库',
                icon: 'FolderRemove',
                url: 'InventoryTransaction' // 新增
            },
            {
                path: '/InventoryTransactionDocuments',
                name: 'InventoryTransactionDocuments',
                label: '出入库单据',
                icon: 'FolderRemove',
                url: 'InventoryTransactionDocuments' // 新增
            },
        ]
    }
]

// 根据角色生成的菜单列表
const generateMenuList = (isAdmin) => {
    let menuList = [...commonMenuList];
    if (isAdmin) {
        menuList.push({
            path: '/employee',
            name: 'employee',
            label: '员工管理',
            icon: 'user',
            url: 'Employee' // 新增
        });
    }
    return menuList;
}

let menuList = []

const handleLogin = async () => {
    try {
        // 表单验证
        if (!loginForm.phone || !loginForm.password) {
            ElMessage.error('请输入手机号和密码')
            return
        }
        
        const res = await api.employee.login(loginForm)
        
        if (res && res.token) {
            // 登录成功
            menuList = generateMenuList(res.position === '1')
            store.updateMenuList(menuList)
            store.state.token = res.token
            store.state.empId = res.empId
            store.addMenu(router)
            ElMessage.success('登录成功')
            router.push('/home')
        } else {
            ElMessage.error('登录失败：' + (res.message || '未知错误'))
        }
    } catch (error) {
        console.error('登录错误：', error)
        ElMessage.error('登录失败：' + (error.message || '服务器错误'))
    }
}
</script>

<template>
    <div class="login-page">
        <div class="login-box">
            <div class="login-title">
                <h2>瑾禾服装管理系统</h2>
                <p>Jin He Clothing Management</p>
            </div>
            <el-form :model="loginForm" class="login-form">
                <el-form-item>
                    <el-input
                        v-model="loginForm.phone"
                        placeholder="手机号码"
                        :prefix-icon="User"
                    />
                </el-form-item>
                <el-form-item>
                    <el-input
                        v-model="loginForm.password"
                        type="password"
                        placeholder="密码"
                        show-password
                        :prefix-icon="Lock"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleLogin">登 录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped lang="less">
.login-page {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

.login-box {
    width: 400px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.login-title {
    text-align: center;
    margin-bottom: 40px;

    h2 {
        font-size: 24px;
        color: #333;
        margin-bottom: 8px;
        font-weight: 600;
    }

    p {
        font-size: 14px;
        color: #666;
        margin: 0;
    }
}

.login-form {
    :deep(.el-input) {
        .el-input__wrapper {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
            padding: 8px 16px;
            transition: all 0.3s;
            
            &:hover {
                box-shadow: 0 0 0 1px #409eff inset;
            }
            
            &.is-focus {
                box-shadow: 0 0 0 1px #409eff inset;
            }
        }
    }

    .el-button {
        width: 100%;
        padding: 12px 0;
        font-size: 16px;
        border-radius: 4px;
        margin-top: 20px;
        
        &:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }
    }
}
</style>